<template>
  <div class="feedback-container">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="feedback">
      <textarea name="feedback-text" id="feedback-text" cols="30" rows="10"
                placeholder="请输入您遇到的问题，我们收到您的反馈后，将快速为您解决！" v-model="question"></textarea>
    </div>
    <div class="btn-container">
      <input type="button" value="拨打客服电话" @click="phoneClick">
      <input type="button" value="提交问题" @click="submitFeedback">
    </div>
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'
  import {get_cookie} from 'assets/cookie/cookie'

  export default {
    name: 'about_us',
    components: {
      BackNavigation
    },
    data () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '问题反馈',
          rightTitle: ''
        },
        htmlPage: '',
        question: ''
      }
    },
    computed: {
      getVerson () {
//        let packageJson = require('../../../package.json')
//        return packageJson.version
        return '1.0.0'
      }
    },
    methods: {
//      getVerson () {
//        return '1.0.0'
//      }
      phoneClick () {
        window.location.href = 'tel:010-60381566'
      },
      submitFeedback () {
        let that = this
        if (!this.question.length) {
          that.$toast({
            message: '内容不能为空',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        if (!get_cookie('key')) {
          that.$toast({
            message: '请登录后重试',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }

        // 提交
        let params = {
          token: get_cookie('key'),
          comment: this.question
        }
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        })
        recommend.post_feedback_submit(params).then(resault => {
          that.$indicator.close()
          that.$toast({
            message: resault.data.message,
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
        }).catch(resault => {
          that.$indicator.close()
          that.$toast({
            message: '请求出错，请稍后重试',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
        })
      }
    },
    created () {
    },
    activated () {
//      let body = document.body
//      body.style.backgroundColor = 'rgb(233, 233, 233)'
    }
  }
</script>

<style lang="scss">
  div.feedback-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgb(233, 233, 233);
    /*background-color: white;*/

    >div.feedback {
      /*background-color: rgb(233, 233, 233);*/
      /*margin-top: 54px;*/
      padding: 54px 15px 20px 15px;
      /*overflow: visible;*/
      height: auto;
      width: 100%;

      >textarea {
        border: 0 solid transparent;
        outline: none;
        color: rgb(66, 66, 66);
        padding: 10px 10px 10px 10px;
        border-radius: 10px;
        height: 200px;
        width: 100%;
        font-size: 14px;
        background-color: white;
      }

      >textarea::placeholder {
        /*padding: 15px 15px 15px 15px;*/
        color: rgb(133, 133, 133);
        font-size: 14px;
      }
    }

    >div.btn-container {
      /*background-color: rgb(233, 233, 233);*/
      /*margin-top: 54px;*/
      padding: 0 15px 20px 15px;
      /*overflow: visible;*/
      height: auto;
      overflow: hidden;
      width: 100%;

      >input {
        outline: none;
        float: left;
        margin-left: 0;
        padding: 0 10px 0 10px;
        height: 44px;
        width: 46%;
        font-size: 14px;
        background-color: transparent;
        border-radius: 5px;
        border: 1px solid rgb(199, 199, 199);
        -webkit-appearance: none;
      }

      >input:last-child {
        float: right;
        margin-right: 0;
        border: 0 solid rgb(199, 199, 199);
        background-color: rgb(27, 162, 232);
        color: white;
      }
    }
  }

  .toast {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>
